<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>主题模板页面结构与样式</title>

    <style>
        body{background: #abc}
        #wraper{}
        #topArea{background: #E08031; margin-top: 30px;}
        .topAreaBar{height: 36px; line-height: 36px;  }
        .webNavBar{height: 46px; line-height: 46px; }
        #mainContainer{background: #000000;margin-top: 15px;}
        .headerBar{background: #EFCF08; margin-top: 15px; }

        #header,.headerBar,.logoWraper{height:150px; line-height:150px;}

        #webNav,.webNavBar,.webNavBar .nav{height:50px; line-height:50px;}
        #webNav{background:#003300;}
        .row,.nav,.headerBar,.footerBar{margin-top: 15px; }
        .logoWraper,.module,.webNavBar,.topAreaBar,.footerBar{ background: #CFF;}

        #footer{margin-bottom: 30px; background: #003366}
        .nav{padding: 0 20px ;margin-top: 15px; }
        .nav li{ float: left; margin-right: 15px; font-size: 16px;}
        .row{ height: 110px; background: #996699;margin-top: 15px;}
        .module{ height: 100px; margin-top: 5px; font-size: 16px; text-align: center; }
        .footerBar{border-top:1px solid #E8E8E8; padding:15px 0;font-family:tahoma,Arial;font-size:12px;color:#999;line-height:22px;text-align:center}
        .footerBar a,.footerBar a:hover{color:#999}

    </style>
    <link rel="stylesheet" href="../cssreset.css"/>
    <link rel="stylesheet" href="../layout.css"/>


    <!-- 有通栏情况 -->
    <!-- #header  和 #footer 通栏情况 -->
    <!-- <link rel="stylesheet" href="./index-fluid.css"/> -->

    <!-- 上下宽度一致 -->
    <link rel="stylesheet" href="./css/index.less"/>


</head>
<body>

<div id="wraper">

    <div class="ls-tpl-common ls-common-top" data-tplid="#{top}">
        <div id="topArea">
            <div class="topAreaBar clearfix">
                <span class="topAreaRight"><a href="#"></a></span>
                <span class="topAreaLeft" style="padding-left: 20px;"> .topAreaBar 欢迎访问专题页！</span>
            </div>
            <!-- topAreaBar -->
        </div>
        <!--topArea-->

        <div id="header">
            <div id="headerBar" class="headerBar" data-type="header">
                <div class="logoWraper">
                    <div id="logo" data-type="logo">
                        <img src="http://p0.ifengimg.com/ifeng/index/20150921/ifengLogo.png">
                    </div>
                    <!-- logo -->
                </div>
                <!-- logoWraper -->
            </div>
            <!-- headerBar -->
        </div>
        <!--header-->

        <div id="webNav">
            <div class="webNavBar">
                <ul class="nav navbar clearfix" id="nav" data-type="nav">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">通知公告</a></li>
                    <li><a href="#">政策法规</a></li>
                    <li><a href="#">在线留言</a></li>

                </ul>
            </div>
        </div>
        <!-- webNav -->
    </div>
    <!-- ls-common-top -->

    <div id="mainContainer" class="container">
        <div id="containerBar" class="containerBar">
            <div class="row">
                <div class="col col-1-1">
                    <div class="module">
                        通栏: .col.col-1-1
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-2">
                    <div class="module">
                        平均两栏: .col.col-1-2
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-2">
                    <div class="module">
                        平均两栏: .col.col-1-2
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-3">
                    <div class="module">
                        平均三栏: .col.col-1-3
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-3">
                    <div class="module">
                        平均三栏: .col.col-1-3
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-3">
                    <div class="module">
                        平均三栏: .col.col-1-3
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-4">
                    <div class="module">
                        平均四栏: .col.col-1-4
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-4">
                    <div class="module">
                        平均四栏: .col.col-1-4
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-4">
                    <div class="module">
                        平均四栏: .col.col-1-4
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-4">
                    <div class="module">
                        平均四栏: .col.col-1-4
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-5">
                    <div class="module">
                        平均五栏: .col.col-1-5
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-5">
                    <div class="module">
                        平均五栏: .col.col-1-5
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-5">
                    <div class="module">
                        平均五栏: .col.col-1-5
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-5">
                    <div class="module">
                        平均五栏: .col.col-1-5
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-1-5">
                    <div class="module">
                        平均五栏: .col.col-1-5
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <!-- 以下布局在设计器中尚未实现 -->
            <!-- 需要由 葛老 协助制作图标即可实现 -->

            <div class="row">
                <div class="col col-1-3">
                    <div class="module">
                        三栏(1:2): .col.col-1-3
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-2-3">
                    <div class="module">
                        三栏(1:2): .col.col-2-3
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-4">
                    <div class="module">
                        四栏(1:3): .col.col-1-4
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-3-4">
                    <div class="module">
                        四栏(1:3): .col.col-3-4
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-2-5">
                    <div class="module">
                        五栏(2:3): .col.col-2-5
                    </div>
                    <!-- module  -->
                </div>
                <div class="col col-3-5">
                    <div class="module">
                        五栏(2:3): .col.col-3-5
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-1">
                    <div class="module">
                        通栏: .col.col-1-1
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-1">
                    <div class="module">
                        通栏: .col.col-1-1
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-1">
                    <div class="module">
                        通栏: .col.col-1-1
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->

            <div class="row">
                <div class="col col-1-1">
                    <div class="module">
                        通栏: .col.col-1-1
                    </div>
                    <!-- module  -->
                </div>
            </div>
            <!-- row -->




        </div>
        <!--containerBar-->
    </div>
    <!--mainContainer-->

    <div id="footer" data-type="footer" class="ls-tpl-common" data-tplid="#{footer}">
        <div class="footerBar" id="footerBar">
            主办单位：某某单位&emsp;承办单位：某某单位<br>
            皖ICP备05003657号 | 网站编辑信箱 | 网站使用帮助 | 网站地图 | 联系方式：xxxx-xxxxxxxxx
            <div class="bot_ico"><img src="http://dcs.conac.cn/image/red.png" width="80" height="80"></div>
        </div>
        <!-- footerBar -->
    </div>
    <!-- footer -->



</div>
<!-- wraper -->

</body>
</html>